<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>叶惟勤 & 刘梦琦的婚礼</title>
  <link rel="stylesheet" href="./libs/swiper.min.css">
  <!-- <link rel="stylesheet" href="./libs/animate.min.css"> -->
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="music-player">
    <audio id="music" loop>
      <source  src="./bgm.mp3"></source>
    </audio>
    <div class="icon-stop" id="btn-play"></div>
  </div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide-1">
          <div class="title">叶惟勤 & 刘梦琦</div>
          <div class="sub-title">- 2011/11/20（星期六）-</div>
          <div class="sub-title">农历 十月十六日</div>
          <div class="icon-heart"></div>
          <div class="btn">我要来</div>
          <div class="picture">
            <img src="./img/1.png" loading="lazy" alt="">
          </div>
        </div>
        <div class="swiper-slide slide-2">
          <div class="title">湖北省 · 孝感市</div>
          <div class="sub-title">- 万禧嘉宴 -</div>
          <div class="icon-heart"></div>
          <div class="map" id="map"></div>
          <div class="address">湖北省孝感市孝南区北京路86号·3F 嘉礼厅</div>
          <div class="btn">我要来</div>
        </div>
        <div class="swiper-slide slide-3">
          <div class="title">迷路怎么办？</div>
          <div class="sub-title">- 请 CALL -</div>
          <div class="tels">
            <p>叶惟勤：<a href="tel:13308647632">13308647632</a></p>
            <p>刘梦琦：<a href="tel:19986287381">19986287381</a></p>
          </div>
          <div class="btn">好的呢</div>
        </div>
        <div class="swiper-slide slide-4">
          <div class="title">LAST</div>
          <div class="title">一波狗粮来袭</div>
          <div class="hearts">
            <div class="icon-heart"></div>
            <div class="icon-heart"></div>
            <div class="icon-heart"></div>
          </div>
          <div class="pictures">
            <div class="left">
              <img class="img-1 hidden" loading="lazy" src="./img/4-1.png" alt="">
            </div>
            <div class="right">
              <img class="img-2 hidden" loading="lazy" src="./img/4-2.png" alt="">
              <img class="img-3 hidden" loading="lazy" src="./img/4-3.png" alt="">
            </div>
          </div>
          <p class="desc">- 高清大图请找新郎/娘 -</p>
          <div class="btn">跳过</div>
        </div>
        <div class="swiper-slide slide-5">
          <div class="title">LAST-2</div>
          <div class="wish">
            <p>谢谢你见证了我们的婚礼</p>
            <p>祝你也跟我们一样幸福</p>
          </div>
          <div class="hearts">
            <div class="icon-heart"></div>
            <div class="icon-heart"></div>
            <div class="icon-heart"></div>
          </div>
          <div class="picture">
            <img src="./img/5.png" loading="lazy" alt="">
          </div>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <!-- <div class="swiper-pagination"></div> -->
    
    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

  <!-- <script src="./libs/jquery-1.11.3.min.js"></script> -->
  <script src="./libs/swiper.min.js"></script>
  <script src="./libs/amfe-flexible.js"></script>
  <script src="./index.js"></script>
</body>
</html>